<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div class="container-fluid">
    <link rel="stylesheet" href="/static/dist/lib/datetimepicker/datetimepicker.css">
    <link rel="stylesheet" href="/static/dist/lib/chosen/chosen.css">

    <link href="/static/umeditor/themes/default/css/ueditor.css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/static/umeditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/umeditor/ueditor.all.js"></script>
    <script type="text/javascript" src="/static/umeditor/lang/zh-cn/zh-cn.js"></script>


    <style>
        .webuploader-container {
            position: relative;
        }
        .webuploader-element-invisible {
            position: absolute !important;
            clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
            clip: rect(1px,1px,1px,1px);
        }
        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            color: #fff;
            background-color: #ffffff00;
            border-color: #ffffff00;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }
        .webuploader-pick-hover {
            background-color: #ffffff00;
            border-color: #ffffff00;
        }
        .webuploader-pick-disable {
            opacity: 0.6;
            pointer-events:none;
        }
    </style>
    <div class="row">
        <div class="col-md-12">活动发布</div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <form id="activityInfo-form-add" name="activityInfoForm" enctype="multipart/form-data" method="post" >

                <fieldset>
                    <div class="form-group">
                        <div class="row">
                            <!-- 活动内容区域 -->
                            <div class="col-md-9">
                                <div class="input-control has-label-left-sm">


                                    <div id="layout">
                                        <div id="test-editormd">
                                            <textarea id="myEditor" th:text="${activity.content}" style="width:100%;height:740px;"></textarea>
                                        </div>
                                    </div>


                                </div>
                            </div>


                            <!-- 活动属性区域 -->
                            <div class="col-md-3">
                                <div class="input-control has-label-left-lg">

                                    <div class="row">
                                        <div class="form-group">
                                            <input type="hidden" name="id" th:value="${activity.id}">
                                            <button type="button" class="btn btn-primary" id="user_btn_save">保存草稿</button>
                                            <button type="button" class="btn btn-primary" id="user_btn_push">发布</button>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">名称</label>
                                            <input type="text" name="name" id="activityName" class="form-control" placeholder="活动名称" th:value="${activity.name}"/>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">主题</label>
                                            <input type="text" name="title" id="activityTitle" class="form-control" placeholder="活动主题" th:value="${activity.title}"/>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">出发地</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="出发地" >
                                                <span class="input-group-addon" id="fromAddress" style="cursor:pointer;" onclick="openModalTrigger('fromAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" name="departure" id="fromAddressText" th:value="${activity.departure}">
                                                <input type="hidden" value="" id="fromAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">目的地</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="目的地" >
                                                <span class="input-group-addon" id="destinationAddress" style="cursor:pointer;" onclick="openModalTrigger('destinationAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" name="destination" id="destinationAddressText" th:value="${activity.destination}">
                                                <input type="hidden" value="" id="destinationAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">出发时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="出发时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" name="startTimeStr" id="activityStartTime" size="16" type="text" value="" readonly="" th:value="${activity.startTimeStr}">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">结束时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="出发时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" name="endTimeStr" id="activityEndTime" size="16" type="text" value="" readonly="" th:value="${activity.endTimeStr}">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">出行方式</label>
                                            <select class="form-control" name="travelMode" id="activityTravelMode">
                                                <option value="0">无</option>
                                                <option value="1">公交车</option>
                                                <option value="2">小车</option>
                                                <option value="3">大巴</option>
                                                <option value="4">火车</option>
                                                <option value="5">飞机</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">人数上限</label>
                                            <input type="text" name="maximumPeople" id="maximumPeople" class="form-control" placeholder="人数上限" th:value="${activity.maximumPeople}"/>
                                        </div>
                                    </div>



                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">活动类型</label>
                                            <select class="form-control" name="type" id="activityType">
                                                <option value="">无</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">集合点</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="集合点">
                                                <span class="input-group-addon" id="meetingAddress" style="cursor:pointer;" onclick="openModalTrigger('meetingAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" name="meetingPlaceAddress" id="meetingAddressText" th:value="${activity.meetingPlaceAddress}">
                                                <input type="hidden" value="" id="meetingAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">集合时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="集合时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" size="16" name="meetingTimeStr" id="meetingTime" type="text" value="" readonly="" th:value="${activity.meetingTimeStr}">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" style="display: none;">
                                        <div class="form-group">
                                            <label class="label">途径位置</label>
                                            <div class="input-group"  data-link-field="dtp_input1" placeholder="途径位置" >
                                                <span class="input-group-addon" id="pathwayAddress" style="cursor:pointer;" onclick="openModalTrigger('pathwayAddress')"><span class="icon-location-arrow"></span></span>
                                                <input class="form-control" size="16" type="text" value="" id="pathwayAddressText" th:value="${activity.pathWays}">
                                                <input type="hidden" value="" id="pathwayAddressLnglat">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">是否产生费用</label>
                                            <div class="switch">
                                                <input type="checkbox" name="isCost" id="isCost" value="0">
                                                <label>是否产生费用</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="cost_row" style="display: none;">
                                        <div class="form-group">
                                            <label class="label">活动费用</label>
                                            <div class="input-group">
                                                <span class="input-group-addon">￥</span>
                                                <input type="number" class="form-control" name="cost" value="0" id="activityCost" placeholder="请输入活动费用金额" th:value="${activity.cost}">
                                                <span class="input-group-addon">.00</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">是否开启报名</label>
                                            <div class="switch">
                                                <input type="checkbox" name="isRegister" id="isRegister" value="0">
                                                <label>是否开启报名</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row register_row" style="display: none;">
                                        <div class="form-group">
                                            <label class="label">报名开始时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="报名开始时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" size="16" name="registerStartTimeStr" id="registerStartTime" type="text" value="" readonly="" th:value="${activity.registerStartTimeStr}">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row register_row" style="display: none;">
                                        <div class="form-group">
                                            <label class="label">报名截至时间</label>
                                            <div class="input-group date form-datetime"  data-link-field="dtp_input1" placeholder="报名截至时间" >
                                                <span class="input-group-addon"><span class="icon-th"></span></span>
                                                <input class="form-control" size="16" name="registerEndTimeStr" id="registerEndTime" type="text" value="" readonly="" th:value="${activity.registerEndTimeStr}">
                                                <span class="input-group-addon"><span class="icon-remove"></span></span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="form-group">
                                            <label class="label">活动封面</label>
                                            <div>
                                                <img id="coverImg" src="http://openzui.com/docs/img/img4.jpg" width="200px" height="200px" class="img-responsive" alt="响应式图片测试" th:src="${activity.coverImg}">
                                                <input name="coverImg" id="coverImgInput" type="hidden" value="http://image.bkybk.com/FsF3T2J_DZlIg24KHKV-pxQSyoPl" th:value="${activity.coverImg}">
                                            </div>
                                            <div>
                                                <button type="button" class="btn" id="uploadFile">简单上传按钮</button>
                                            </div>


                                        </div>
                                    </div>






                                </div>
                            </div>

                        </div>
                    </div>

                </fieldset>
            </form>
        </div>
    </div>

    <div id="myStyleModal"></div>

    <script src="/static/dist/lib/datetimepicker/datetimepicker.js"></script>
    <script src="/static/dist/lib/chosen/chosen.js"></script>
    <script src="/static/webuploader/webuploader.js"></script>






    <script type="text/javascript">
        var testEditor;

        var $ = jQuery,ue,
            $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            uploader;

        var selectAddressModalT = $.zui.modalTrigger;

        $(function() {

            // 初始化富文本编辑器
            initEditor();

            // 初始化时间控件
            initDatetimePicker();

            // 初始化下来类型
            initLvType();

            // 初始化附件上传控件
            initUploader();

        });

        function initUploader() {
            // 初始化WebUploader
            var uploadFile = $("#uploadFile");
            // 实例化,
            var uploadFile_Web_Uploader = WebUploader.create({
                pick: {
                    id: uploadFile,//指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
                    //label: title,
                },
                server: "/admin/activity/mediaLibrary/upload",
                flash: '/static/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
                // 文件接收服务端。
                //server: '/admin/activity/mediaLibrary/upload',
                auto:true
            });
            //当文件上传成功时触发。file {File} File对象, response {Object}服务端返回的数据
            uploadFile_Web_Uploader.on('uploadSuccess',function(file,response){
                console.log("简单渲染上传完成，服务端返回信息请按F12,看控制台：");
                console.log(file);
                if(response.status && response.code == 200){
                    console.log(response);
                    $('#coverImg').attr('src', response.data);
                }
            });

        }



        function initEditor() {
            ue = UE.getEditor('myEditor');
        }

        /**
         * 初始化时间控件
         */
        function initDatetimePicker() {
            // 选择时间和日期
            $(".form-datetime").datetimepicker(
                {
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    forceParse: 0,
                    showMeridian: 1,
                    format: "yyyy-mm-dd hh:ii:ss"
                });

            $('#isCost').on('change', function () {
                if($(this).prop("checked")) {
                    $('#cost_row').show();
                }else {
                    $('#cost_row').hide();
                }
            });

            $('#isRegister').on('change', function () {
                if($(this).prop("checked")) {
                    $('.register_row').show();
                }else {
                    $('.register_row').hide();
                }
            });
        }

        /**
         * 打开模态对话框
         */
        function openModalTrigger (inptuId) {
            var __opp = {
                title: '选择位置',
                //custom: '#myStyleModal',
                remote: '/admin/activity/selectSite?selectType='+inptuId,
                backdrop: false,
                size: 'fullscreen',
                keyboard: false
            };
            selectAddressModalT.show(__opp);
        }

        function initLvType() {
            /**
             * 初始化上级资源
             */
            $.post('/admin/activity/type/all', {}, function(res) {
                var html = "";
                for(index in res.data){
                    if(res.data[index]){
                        html += "<option value='" + res.data[index].id + "'>" + res.data[index].name + "</option>";
                    }
                }
                $('#activityType').append(html);
                $('#activityType').chosen({
                    no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                    disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框
                    search_contains: true         // 从任意位置开始检索
                });
            });
        }

        /**
         * 发布
         */
        $('#user_btn_push').on('click', function () {
            console.log('user_btn_push _ save ing……');
            var _params = {};
            var _fData = $('form[name=activityInfoForm]').serializeArray();
            for(var k in _fData) {
                if('maximumPeople' == _fData[k].name){
                    _params[_fData[k].name] = Number(_fData[k].value);
                }else if('type' == _fData[k].name){
                    _params[_fData[k].name] = Number(_fData[k].value);
                }else if('test-editormd-markdown-doc' == _fData[k].name) {

                }else{
                    _params[_fData[k].name] = _fData[k].value;
                }


            }

            var _html = ue.getContent();//获取值
            _params['content'] = _html;
            $.post('/admin/activity/update', _params, function (res) {
                console.log(res);
                if(res.code == 200 && res.status){
                    new $.zui.Messager('保存成功。', {
                        type: 'success',
                        icon: 'check',//smile
                        close: true,
                        time: 0,
                        placement: 'center' // 定义显示位置
                    }).show();
                    setTimeout(function () {
                        // 页面跳转
                        $('body').hrefClick('/admin/activity/index');
                    }, 2000);
                }else{
                    new $.zui.Messager('保存失败，请检查或修改内容后重试。', {
                        type: 'danger',
                        icon: 'frown',//smile
                        close: true,
                        placement: 'center' // 定义显示位置
                    }).show();
                }
            });

        });






    </script>
</div>
</body>
</html>